<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>

   <script>
       let chartDom = document.getElementById('main');
       let myChart = echarts.init(chartDom);
       let option;


       let ws = new WebSocket("ws://localhost:8302/movieWebService");

       ws.onopen = function(evt) {
           console.log("Connection open ...");
           ws.send("Hello WebSockets!");
       };

       ws.onmessage = function(evt) {
           console.log("Received Message: " + evt.data);
           option = {
               tooltip: {
                   formatter: '{a} <br/>{b} : {c}%'
               },
               series: [
                   {
                       name: 'Pressure',
                       type: 'gauge',
                       progress: {
                           show: true
                       },
                       detail: {
                           valueAnimation: true,
                           formatter: '{value}'
                       },
                       data: [
                           {
                               value: evt.data,
                               name: 'SCORE'
                           }
                       ],
                       max: 1000
                   }
               ]
           };

           option && myChart.setOption(option);
       };

       ws.onclose = function(evt) {
           console.log("Connection closed.");
       };




   </script>
</body>
</html>
